{% extends 'blog_base.html' %}
{% block head %}
    <script src="{% static 'jquery/jquery.min.js' %}"></script>
    <script src="{% static 'js/blog_register.js' %}"></script>
{% endblock %}
{% block title %}
    博客注册
{% endblock %}
{% block main %}
    <h1>注册</h1>
    <div style="max-width: 330px" class="m-auto">
        <form action="" method="post">
            {% csrf_token %}
            <div class="mt-2">
                <label for="">用户名</label>
                <input type="text" class="form-control" name="username" placeholder="用户名">
            </div>

            <div class="mt-2">
                <label>邮箱</label>
                <input type="email"
                       class="form-control {% if form.email.errors %}is-invalid{% endif %}"
                       name="email"
                       placeholder="邮箱"
                       value="{{ form.email.value|default_if_none:'' }}">  <!-- 保留已填内容 -->
                {% for error in form.email.errors %}
                    <div class="invalid-feedback">{{ error }}</div>
                {% endfor %}
            </div>
            <div class="mt-2">
                <label for="">密码</label>
                <input type="password" class="form-control" name="password" placeholder="密码">
            </div>

            <div class="mt-2">
                <label for="">验证码</label>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="验证码" name="captcha"
                           aria-label="Recipient's username" aria-describedby="button-addon2">
                    <button class="btn btn-outline-secondary" type="button" id="captcha-btn">获取验证码</button>
                </div>
            </div>
            <div class="mt-2">
                <button class="btn btn-primary w-100">立即登录</button>
            </div>
        </form>
    </div>
    </div>
{% endblock %}